<template lang="">
  <div v-if="isShow" class='grimm-empty' :style="{'top': paddingTop}">
    <img class="grimm-empty-icon" :src="getImgSrc" >
    <p class="grimm-empty-tip">{{tips}}</p>
      <div v-if="btnList.length > 0" class="grimm-empty-btn-group">
        <grimm-button v-for="(item, index) in btnList" :key="index" :style="{...btnStyle}" :type="item.type" @click="onClick()">{{item.name }}</grimm-button>
      </div>
  </div>
</template>

<script>
const COMPONENT_NAME = 'grimm-empty-status';

export default {
  name: COMPONENT_NAME,
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    tips: {
      type: String,
      default: '暂无相关数据',
    },
    paddingTop: {
      type: String,
      default: '0px',
    },

    // Avaliable value: noData | noNetwork
    emptyType: {
      type: String,
      default: 'noData',
    },

    // Example: [ { name: '', type: '', onClick: '' }]
    btnList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    getImgSrc() {
      const noDataUrl = require('../../common/images/no-data.png');
      const noNetworkUrl = require('../../common/images/no-network.png');

      const imgMap = {
        noData: noDataUrl,
        noNetwork: noNetworkUrl,
      };
      return imgMap[this.emptyType];
    },
  },
  data() {
    return {
      btnStyle: {
        margin: '0 8px',
        'min-width': '80px',
        'background-color': '#fff',
      },
    };
  },
  methods: {
    onClick() {
      this.$emit('handleClick');
    },
  },
};
</script>

<style>
.grimm-empty {
  position: absolute;
  background: #f8f8f8;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  text-align: center;
  z-index: 10;
}
.grimm-empty-icon {
  margin-top: 94px;
  width: 120px;
}
.grimm-empty-tip {
  margin-top: 0;
  font-size: 14px;
  color: #909099;
  text-align: center;
}
.grimm-empty-btn-group {
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>